<template>
	<!-- 默认打开的是这个页面  此页面为首页 -->
	<van-pull-refresh
		:pulling-text="i18n.common.pulling_text"
		:loosing-text="i18n.common.loosing_text"
		:loading-text="i18n.common.loading"
		v-model="isLoading"
		@refresh="onRefresh">
		<view class="body">
			<view class="page-content">
				<!-- <scroll-view scroll-y="true" class="uni-tab-bar" style="background-color: #fff;"> -->
				<scroll-view scroll-y="true" class="uni-tab-bar" style="">
					<!--背景图;;;-->
					<view class="main-top-content top-s-bg">
						<!-- 标题 -->
						<view class="home-title-all p-2">
							<!-- 语言切换 -->
							<!-- <view class='change-lang'>
								<van-dropdown-menu>
									<van-dropdown-item v-model="langValue" :options="langOption" @change="changeLang" />
								</van-dropdown-menu>
							</view> -->
						</view>

						<view class="top-swiper p-2">
							<!--轮播图组件-->
							<view class="swiper" v-if="imgUrls && imgUrls.length">
								<swiper indicator-dots="true" :autoplay="true" circular :interval="3000"
									:duration="1000" indicator-color="rgba(255,255,255,0.6)"
									indicator-active-color="#fff">
									<block v-for="(item,index) in imgUrls" :key="index">
										<swiper-item>
											<navigator
												:url='item.header.indexOf("quanquan")>0?"../adshow/index":item.url'
												class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
												<image :src="item.header" class="slide-image" lazy-load></image>
											</navigator>
										</swiper-item>
									</block>
								</swiper>
							</view>
						</view>
						<!--纵向滚动 播报中奖信息-->
						<view class="d-flex j-sb a-center bg-white my-2 p-2 broadcast-box">
						<!-- <view class="my-2 broadcast-box"
							style="height: 100upx;margin-top:20rpx;"> -->
							<view class="broadcast-title">
								<!-- 幸运播报 -->
								<!-- {{i18n.home_page.tips.t16}} -->
								<!-- <span class="line">：</span> -->
								<image mode="widthFix" style="width: 36upx;height:36upx;"
									src="/static/img/lb.png"></image>
							</view>
							<!--轮播图组件-->
							<view class="swiper" v-if="winUsers && winUsers.length" style="height: 50upx; width: 90%;">
								<swiper indicator-dots="true" :autoplay="true" circular :interval="3000" vertical
									:duration="2000" indicator-color="rgba(255,255,255,0.6)"
									indicator-active-color="#fff" style="height: 70upx;">
									<block v-for="(item,index) in winUsers" :key="index">
										<swiper-item>
											<text class="box-content">
												{{item.nick_name}}
												<text class="text-danger">
													<!-- 中了 -->
													{{i18n.common.zhongle}}
												</text>
												{{item.good_name}}
											</text>
										</swiper-item>
									</block>
								</swiper>
							</view>
						</view>

						<!--菜单栏-->
						<view style="position: relative;">
							<view class='nav acea-row bg-white' style="border-radius: 10rpx;" v-if="menus.length">
								<block v-for="(item,index) in menus" :key="index">
									<view @click="navigateTo(item.url)" class='item' v-if="item.is_jump == 'n'"
										:url='item.url' open-type='switchTab' hover-class='none'>
										<view class='pictrue'>
											<image :src='item.header'></image>
										</view>
										<view class="menu-txt f13" style="margin-top:15rpx;line-height: 1;">{{item.title}}</view>
									</view>
									<view @click="navigateTo(item.url)" class='item' v-else :url='item.url'
										hover-class='none'>
										<view class='pictrue'>
											<image :src='item.header'></image>
										</view>
										<view class="menu-txt f12" style="margin-top:15rpx;line-height: 1;">{{item.title}}</view>
									</view>
								</block>
							</view>
						</view>

					</view>

					<!-- <view class="home-icon">
						<view class="home-icon-small">
							<dd><img src="/static/images/user_menu01.png"></dd>
							<dt><text>联系客服</text></dt>
						</view>
						<view class="home-icon-small">
							<dd><img src="/static/images/user_menu02.png"></dd>
							<dt><text>联系客服</text></dt>
						</view>
						<view class="home-icon-small">
							<dd><img src="/static/images/user_menu03.png"></dd>
							<dt><text>联系客服</text></dt>
						</view>
						<view class="home-icon-small">
							<dd><img src="/static/images/user_menu04.png"></dd>
							<dt><text>联系客服</text></dt>
						</view>
					</view> -->



					<!--横向十分钟抽奖专区-->
					<view class="bg-white mb-1">
						<view class="swiper-item">
							<view class="d-flex a-center j-center latest-draw-box">
								<!-- <image style="height: 25upx;width: 25upx;"
									src="">
								</image> -->
								
								<!-- 最新开奖 -->
								<!-- <view class="hot-box">
									<van-icon name="hot" />
								</view> -->
								<text class="font-lg font-weight px-2 f16 latest-draw"
									style="">
									{{i18n.home_page.tips.t4}}
								</text>
								<!-- <image style="height: 25upx;width: 25upx;"
									src="">
								</image> -->
							</view>
						</view>
						<swiper style="height:650rpx;width: 95%;margin: 0 auto;" :indicator-dots="true"
							:autoplay="false" :interval="3000">
							<block v-for="(itemList,index) in willKnowFightList" :key="index">
								<swiper-item>
									<view class="row">
										<view v-for="(item,i) in itemList" :key="i" class="d-flex flex-column span-10">
											<view class="item-img">
												<image @click="lotteryDetail(item)" class="img_wrap"
													:src="item.good_header"></image><!-- mode="widthFix" -->
											</view>
											<view class="px-1" style="width: 370rpx;"><text
													class="box-content font-sm">({{item.good_period}}{{i18n.home_page.tips.t5}}){{item.good_name}}
												</text></view>
											<view class="chooseTime0 px-1 py-0" style="width: 100%;">
												<view class="d-flex box my-1 line-h-md"
													style="width: 100%;">
													<!-- <view class="d-flex box my-1 line-h-md"
													style="background-color: #f6ca4f;width: 100%;"> -->
													<!-- background-color: #f6ca4f; -->
													<!-- 100%公平公正 -->
													<text class="left">
														{{i18n.home_page.tips.t6}}
													</text>
													<!-- <view class="right ">
														<!-- <van-icon name="gift-card" /> -->
													<!-- </view> -->
												</view>
												<view class="progress-box mt-3" v-if="item.is_show_daojishi=='y'">
													<!-- 		<progress :percent="item.progress" active activeColor="rgb(246, 202, 79)"
													stroke-width="3" backgroundColor="#ebedf0" /> -->
													<!-- <van-progress :show-pivot="showPivot" stroke-width="3" color="rgb(246, 202, 79)"
														:percentage="item.progress==undefined?0:item.progress" /> -->
													<van-count-down millisecond :time="caculateTime(item.lottery_time)"
														format="mm:ss:SS" @finish="finish(item.id)">
														<!-- <template #default="timeData">
															<span class="block">{{ timeData.minutes }}</span>
															<span class="colon">:</span>
															<span class="block">{{ timeData.seconds }}</span>
															<span class="colon">:</span>
															<span
																class="block milliseconds">{{ timeData.milliseconds }}</span>
														</template> -->
													</van-count-down>

												</view>
												<view class="d-flex flex-column j-center a-start" v-else>
													<view class="box-content">
														<!-- 获奖者 -->
														<text
															style="color: #626262;font-size: 10px;">{{i18n.home_page.tips.t7}}：</text>
														<text
															style="color: #1a69c4;font-size: 10px;">{{item.nick_name}}</text>
													</view>
													<view>
														<!-- 幸运号 -->
														<text
															style="color: #626262;font-size: 10px;">{{i18n.home_page.tips.t8}}：</text>
														<text
															style="color: #d81414;font-size: 10px;">{{item.win_num}}</text>
													</view>
													<!-- 													<view>
														<text style="color: #626262;font-size: 10px;">本次参与：</text>
													    <text style="color: #626262;font-size: 10px;">{{item.play_num}}人次</text>
													</view> -->
													<view>
														<!-- 揭晓时间： -->
														<text
															style="color: #626262;font-size: 10px;">{{i18n.home_page.tips.t9}}：</text>
														<text
															style="color: #626262;font-size: 10px;">{{dateFormat("mm-dd HH:MM:SS",new Date(item.lottery_time))}}</text>
													</view>
												</view>
												<!--记录文字区-->
												<!-- 												<view class="d-flex a-center j-sb">
													<view class="side px-1">
														<view class="line-h-sm "><text class="font-sm">已参与</text></view>
														<view class="line-h-sm text-warning"><text
																class="font-sm">{{item.now_people}}</text></view>
													</view>
													<view class="side px-1">
														<view class="line-h-sm "><text class="font-sm">剩余</text></view>
														<view class="line-h-sm"><text
																class="font-sm">{{item.need_people-item.now_people}}</text>
														</view>
													</view>
													<view class="side px-1">
														<view class="line-h-sm "><text class="font-sm">总数量</text></view>
														<view class="line-h-sm  text-warning"><text
																class="font-sm">{{item.need_people}}</text></view>
													</view>
												</view> -->
											</view>


											<!-- 	<view class="d-flex a-center j-center">
												
												<view class="px-1 m-1">
													<button
														style="background-color: rgb(246, 202, 79); width: 195rpx;height: 60rpx;"
														class="text-light cu-btn round"
														@click="lotteryDetail(item)">立即参与</button>
												</view>
												<view @click="addShopCar(item)" class="cu-item px-1"
													style="font-size: 49upx;"><text
														class="lg text-yellow cuIcon-like"></text></view>
											</view> -->
										</view>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
					<!--分类标签栏-->
					<van-sticky>
						<view class="position-relative" style="box-shadow: 0 5rpx 5rpx rgba(0,0,0,0.1);">
							<scroll-view scroll-x class="bg-white  nav"
								style="padding-bottom: 2upx; height: 85rpx;width: 100vw;white-space: nowrap;padding-left: 10px;"
								scroll-with-animation :scroll-left="scrollLeft">
								<view class="cu-item" :class="index==TabCur?'text-orange tab-background cur':''"
									v-for="(item,index) in catgoryList" :key="index" @tap="tabSelect($event,item)"
									:data-id="index">
									{{item.goods_type_name}}
								</view>
							</scroll-view>
							<!-- <view class="good-fenlei" @click="goFenlei">
								<image mode="widthFix" style="height:18px;width: 18px;" src="/static/img/fenlei.png">
								</image>
								<!-- 分类 -->
								<!-- <text class="fenlei-title">{{i18n.home_page.tips.t10}}</text> -->
							<!-- </view> -->
						</view>
					</van-sticky>
					<!--商品列表-->
					<van-list
						class="p-2"
						v-model="loading"
						:finished="finished"
						:finished-text="i18n.common.no_more"
						@load="onLoad"
						style="background: #f5f5f5;"
					>
						<!--没有更多了-->
						<view class="row j-sb a-center">
							<view
								v-for="(item,index) in goodsList"
								:key="index"
								:title="item.title"
								class="d-flex flex-column  bg-white border mb-1"
								style="border-radius: 10px;width: 49%;"
							>

								<view class="item-img">
									<image class="img_wrap" :src="item.good_header" @click="lotteryDetail(item)"
										lazy-load></image><!-- mode="widthFix" -->
								</view>
								<view class="px-2" style="padding-top: 20upx;">
									<!--期-->
									<text class="box-content font-sm f12">
										({{item.good_period}}<text class="f10">{{i18n.common.expect}}</text>){{item.good_name}}
									</text>
								</view>
								<!-- <view class="chooseTime0 px-2 py-0" style="width: 320upx;"> -->
								<!-- <view class="d-flex box my-1 line-h-md" style="background-color: #f6ca4f;">
										<view class="left">
										<text class="font-sm text-light py-1"
											style="border-radius: 0 0 10upx 0;background-color: #00418a;">100%公平公正</text>
									</view>
										<text class="left"> -->
								<!-- 100%公平公正 -->
								<!-- {{i18n.home_page.tips.t6}}
										</text>
										<view class="right ">
											<view class="right pl-1 ">
												<count-down tipText="" dayText="" hourText=":" minuteText=":" :isDay="false"
												:datatime="item.lottery_time" secondText=""></count-down>
											</view>
										</view>
									</view> -->
								<!-- </view> -->
								<view class="progress-box px-2 mb">
									<!-- <progress :percent="item.progress" active activeColor="rgb(246, 202, 79)"
									stroke-width="3" backgroundColor="#ebedf0" /> -->
									<van-progress :show-pivot="showPivot" stroke-width="3" color="#e93323" class="mb-1"
										:percentage="item.progress==undefined?0:item.progress"
										style="border-radius: 10rpx;height:10rpx;" />
									<!--记录文字区-->
									<view class="d-flex a-center j-sb">
										<view class="side ">
											<view class="line-h-sm ">
												<!-- 已参与 -->
												<text class="font-sm">{{i18n.home_page.tips.t12}}</text>
											</view>
											<view class="line-h-sm text-warning"><text
													class="font-sm">{{item.now_people}}</text></view>
										</view>
										<view class="side px-1">
											<view class="line-h-sm ">
												<!-- 剩余 -->
												<text class="font-sm">{{i18n.home_page.tips.t13}}</text>
											</view>
											<view class="line-h-sm"><text
													class="font-sm">{{item.need_people-item.now_people}}</text></view>
										</view>
										<view class="side ">
											<view class="line-h-sm ">
												<!-- 总数量 -->
												<text class="font-sm">{{i18n.home_page.tips.t14}}</text>
											</view>
											<view class="line-h-sm  text-warning"><text
													class="font-sm">{{item.need_people}}</text></view>
										</view>
									</view>
								</view>
								<view class="d-flex a-center j-center" style="padding-top: 20upx;">
									<!-- <button class="font-md" "></button> -->
									<view class="px-1 m-1">
										<!-- rgb(246, 202, 79); -->
										<button @click="lotteryDetail(item)"
											style="width: 195rpx;height: 60rpx;background-color: #e93323"
											class="text-light cu-btn round">{{i18n.home_page.tips.t15}}</button>
										<!---立即参与-->
									</view>
									<view @click="addShopCar(item)" class="cu-item px-1" style="font-size: 49upx;"><text
											class="lg text-red cuIcon-like"></text></view>
								</view>
							</view>
						</view>

					</van-list>

				</scroll-view>

			</view>
			<van-loading size="36" v-if="loading" class="fixed-center" color="#f5c95a" />
		</view>
		<!-- 中奖弹出 -->
		<van-overlay :show="overlayShow" @click="overlayShow = false">
  			<view class="over-wrapper" @click.stop>
    			<view class="over-block">
					<view class="over-title">
						{{i18n.common.gx}}
					</view>
					<view class="over-main">
						<view class="over-pic">
							 <image style="width: 100upx; height: 100upx;" mode="widthFix" :src="goodHeader"></image>
						</view>
						<view class="over-desc">
							<text class="sp">{{winProduct}}</text>
							<!-- <text class="big">{{winName}}</text> -->
							<!-- <text class="sm">{{i18n.common.hj}}</text> -->
						</view>
						<view class="over-btn" @click="queryDetails">
							<!-- <navigator url="https://www.baidu.com/"> -->
								{{i18n.common.query}}
							<!-- </navigator> -->
						</view>
					</view>
				</view>
  			</view>
		</van-overlay>

		<!-- 页面loading -->
		<van-overlay :show="isPageShow" @click="isPageShow = false">
  			<div class="page-wrapper-load" @click.stop>
    			<div class="block">
					<van-loading type="spinner" />
				</div>
  			</div>
		</van-overlay>
	</van-pull-refresh>
</template>

<script>
	import {
		getIndexData,
		getCoupons
	} from '@/api/api.js';

	import {
		Cache
	} from '@/utils/cache.js';

	import {
		dateFormat,
	} from '@/utils/util.js';

	import {
		payment
	} from '@/utils/payment.js'

	import {
		UID,
		LOGIN_STATUS
	} from '@/config/cache';


	import {
		getLotteryIndexData,
		getLotteryGoodTypes,
		getLotteryGoodTypeList,
		addShopCar,
		getLotteryGoodDetail,
		getUserInfo,
	} from '@/api/lottery.js';
	import { Toast  } from 'vant';



	import countDown from "@/components/countDown/index.vue"

	export default {
		components: {
			countDown
		},
		data() {
			return {
				isPageShow: false, // page loading
				userId: '', // 用户ID
				overlayShow: false,
				winName: '15821764237',
				winProduct: "",
				langValue: 'en',
				indexShow: false, // 首页遮罩层
				goodHeader: '', // 中奖商品图片
				langOption: [
					{ text: "en-US", value: 'en' },
					{ text: "简体中文", value: 'cn' },
				],
				langOpts: [{
						name: '简体中文',
						lang: 'cn',
						color: '#333',
						selected: 0
					},
					{
						name: 'en-US',
						lang: 'en',
						color: '#333',
						selected: 0
					},
				],
				langValue: '',
				TabCur: 0,
				scrollLeft: 0,
				imgUrls: [],
				menus: [],
				list: [],
				loading: false,
				isLoading: false,
				finished: false,
				isDrawing: false,
				willKnowFightList: [],
				lotteryGoodTypeList: [],
				//是否显示进度文字
				showPivot: false,
				catgoryList: [{
						id: "1",
						name: "热门推荐" // 热门推荐
					},
					{
						id: "2",
						name: "选时开奖"
					},
					{
						id: "3",
						name: "轻奢专区"
					},
					{
						id: "4",
						name: "自助选号"
					},
					{
						id: "1",
						name: "一线数码"
					},
					{
						id: "1",
						name: "火热爆款"
					}
				],
				winUsers: [{
						uname: '四叶堂',
						wgood: '2000元京东E卡'
					},
					{
						uname: '三叶堂',
						wgood: '1000元京东E卡'
					},
					{
						uname: '五叶堂',
						wgood: '500元京东E卡'
					}
				],
				goodsList: [{
					id: "1",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"endTime": 1615300325
				}, {
					id: "2",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"endTime": 1615300325
				}, {
					id: "3",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"endTime": 1615300325
				}, {
					id: "4",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"endTime": 1615300325
				}]
			}
		},
		created() {
			//修改手机状态栏颜色
			// #ifndef H5
			//plus.navigator.setStatusBarBackground("rgb(246, 202, 79)");
			// #endif
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.home_page.title
			});
		},
		onShow() {
			//异步获取首页数据
			Promise.all([this.getIndexConfig()]);
			try {
				if (plus.os) {
					plus.navigator.setStatusBarBackground("rgb(246, 202, 79)");
				}
			} catch (e) {
				console.log("sss" + e);
			}
			this.langValue = this._i18n.locale
		},
		methods: {
			queryDetails: function() {
				this.overlayShow = false
				uni.navigateTo({
    				url: '/pages/lottery/lottert_myWinRecord/lottert_myWinRecord'
				});
			},
			changeLang: function() {
				this._i18n.locale = this.langValue;
				uni.setStorageSync('YYG_LANG', this.langValue)
				console.log('changfe lang', this.langValue, this._i18n)
				location.reload()
			},
			dateFormat: function(fmt, date) {
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret && ret[1]) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length,
							"0")))
					};
				};
				return fmt;
			},
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				this.isPageShow = true
				getLotteryIndexData().then(res => {
					this.isPageShow = false
					// console.log('获取首页数据', res)
					that.$set(that, "imgUrls", res.advertisementList);
					that.$set(that, "menus", res.menubarList); // 菜单分类
					that.$set(that, "winUsers", res.radiolist);
					that.$set(that, "willKnowFightList", res.willKnowFightList);
					that.$set(that, "catgoryList", res.goodsTypeList); // 分类列表
					// that.catgoryList.push({
					// 	"goods_type_name": "全部商品"
					// })
					that.$set(that, "goodsList", res.goodsTypeListNew);
					if(res.userMap){
						that.userId = res.userMap.id // 获取当前用户ID
						console.log('用户ID....', this.userId)
						uni.setStorageSync('USER_MAP_ID', res.userMap.id)
					}
				});
				// getLotteryGoodTypes().then(res => {
				// 	that.$set(that, "catgoryList", res.goodsTypeList);
				// 	that.catgoryList.push({
				// 		"goods_type_name": "全部商品"
				// 	})
				// 	that.$set(that, "goodsList", res.goodsTypeListNew);
				// });
				// getIndexData().then(res => {
				// 	// uni.setNavigationBarTitle({
				// 	//title: '购物抽奖'
				// 	// })
				// 	// that.$set(that, "logoUrl", res.data.logoUrl);
				// 	// that.$set(that, "site_name", '首页');
				// 	//console.log(res.data.banner)
				// 	that.$set(that, "imgUrls", res.data.banner);
				// 	that.$set(that, "menus", res.data.menus);
				// 	// that.$set(that, "menus", res.data.menus);
				// 	// that.lovely = res.data.lovely
				// 	// that.$set(that, "pageInfo", res.data)
				// 	// that.$set(that, "firstList", res.data.info.firstList);
				// 	// that.$set(that, "bastList", res.data.info.bastList);
				// 	// that.$set(that, "likeInfo", res.data.likeInfo);
				// 	// that.$set(that, "benefit", res.data.benefit);
				// 	// that.$set(that, "bastBanner", res.data.info.bastBanner);
				// 	// that.$set(that, "couponList", res.data.couponList);
				// 	// that.$set(that, "explosiveMoney", res.data.explosiveMoney);
				// 	// that.goodType = res.data.explosiveMoney[0].type
				// 	// // #ifdef H5
				// 	// that.subscribe = res.data.subscribe;
				// 	// // #endif

				// 	// this.getGroomList();

				// 	// this.shareApi();

				// 	// this.getcouponList();
				// })
			},
			tabSelect(e, item) {
				this.loading = true;
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				let that = this;
				if (item.goods_type_name == "全部商品") {
					item = {};
					item.id = null;
					item.goods_type_name = null
				}
				getLotteryGoodTypeList({
					goodsTypeId: item.id,
					goodsTypeName: item.goods_type_name
				}).then(res => {
					that.$set(that, "goodsList", res.goodsTypeList);
					that.loading = false;
				}).catch(e => {
					that.loading = false;
				});
			},
			onLoad() {
				this.loading = false;
				this.finished = true;
			},
			//请求抽奖详情页面
			lotteryDetail(item) {
				console.log(item.id)
				uni.navigateTo({
					url: '/pages/lottery/good_details/good_details?id=' + item.id
				});
			},
			onRefresh() {
				let that = this;
				setTimeout(function() {
					Promise.all([that.getIndexConfig()]).then(res => {
						that.isLoading = false;
					});
				}, 250);
			},
			// 前往分类页面
			goFenlei() {
				uni.navigateTo({
					url: "../lottery_cate/lotteryCate"
				})
				// uni.switchTab({
				// 	url:"../lottery_cate/lotteryCate"
				// });
			},
			addShopCar(item) {
				//添加购物车
				let data = {
					goods_id: item.good_id
				};
				addShopCar(data).then(res => {
					if (res) {
						// 成功加入心愿单
						Toast.success(this.i18n.home_page.good_details.t40);
					} else {
						// 加入心愿单失败
						Toast.fail(this.i18n.home_page.good_details.t41);
					}
				})
			},
			navigateTo(url) {
				if (url.indexOf("payment") > 0) {
					this.goPay(url);
				} else {
					getApp().navigateTo(url);
				}
			},
			goPay(url) {
				payment();
			},
			caculateTime(lottery_time) {
				let str = lottery_time;
				//str = str.replace(/-/g,'/');
				var date = new Date(str);
				//console.log(date.getTime());
				var nowdate = new Date();
				let time = (date.getTime() - nowdate.getTime());
				// console.log('开奖时间1111', time)
				if (time > 0) {
					return time;
				}
			},
			finish(id) {
				//倒计时结束重新获取抽奖信息
				this.getWin(id);
			},
			getWin(good_fight_id) {
				let that = this;
				getLotteryGoodDetail({
					goods_fight_id: good_fight_id
				}).then(res => {
					if (res != null) {
						var c = -1;
						var d = -1;
						that.willKnowFightList.forEach((item, i) => {
							item.forEach((item2, j) => {
								if (item2.id == res.id) {
									c = i;
									d = j;
								}
							})
						})
						// for (var i in that.willKnowFightList) {
						// 	for (var j in that.willKnowFightList[i]) {
						// 		if (that.willKnowFightList[i][j].id == res.id) {
						// 			c = i;
						// 			d = j;
						// 			break;
						// 		}
						// 	}
						// }
						if (c != -1) {
							// that.willKnowFightList[c].splice(d, 1, res);
							// that.willKnowFightList[c][d];
							//that.willDoList[c]=res;
							
							if (res.win_user) {
								that.willKnowFightList[c][d].nick_name = res.win_user.nick_name;
								that.willKnowFightList[c][d].play_num = res.win_user.win_time;
								// 获奖者弹框告示
								// console.log('获奖者弹框告示: ', res.win_user.nick_name, that.userId, res.win_user_id)
								let getUserMapId = uni.getStorageSync('USER_MAP_ID')
								if (that.userId) {
									if (res.win_user.nick_name && that.userId == res.win_user_id) {
										that.goodHeader = res.good_header
										that.winProduct = res.good_name
										that.overlayShow = true
									}
								} else if (getUserMapId) {
									if (res.win_user.nick_name && getUserMapId == res.win_user_id) {
										that.goodHeader = res.good_header
										that.winProduct = res.good_name
										that.overlayShow = true
									}
								}
							}
						}
					} else {
						setTimeout(function() {
							that.getWin(good_fight_id);
						}, 5000);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 官方ui库 */
	@import "@/common/uni.css";
	@import "@/common/font.css";

	.body {
		font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
	}

	.main-top-content {
		background-color: #fff;
		// background-image: url("https://api.wojiufafa.cn/mall/img/bg.54665930.png");
		// background: linear-gradient(#E93323, #FFF);
		// background: -webkit-linear-gradient(#E93323, rgba(168, 132, 255, 0.8), #fff);
		// background-size: 100% 700rpx;
	}

	.home-title-all {
		height: 50rpx;
		line-height: 50rpx;
		position: relative;
	}

	.home-title {
		// text-align: center;
		font-size: 30upx;
		font-weight: bold;
		float: left;
		color: #fff;
		margin-top: -8rpx;
	}

	.change-lang {
		float: right;
	}

	.top-s-bg{
		background-color: #E93323;
	}

	.s2-box{
		background-color: #fff;
	}

	.change-lang select {
		background: none;
		font-size: 30upx;
		font-weight: bold;
		color: #FFF;
		border: 0;
		// position: absolute;
		// z-index: 999;
		// right:1%;
		// top:1%;
	}

	.box-content {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 3.4666666667vw;
	}



	.swiper {
		position: relative;
		width: 100%;
		height: 300rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		overflow: hidden;
		/* #ifdef MP */
		z-index: 10;

		/* #endif */
		swiper,
		.swiper-item,
		image {
			width: 100%;
			height: 300rpx;
			border-radius: 10rpx;
		}
	}

	.nav {
		padding: 0 0rpx;
		flex-wrap: wrap;

		// margin-top: 30rpx;
		// background-color: none;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 25%;
			margin: 10rpx 0;

			image {
				width: 82rpx;
				height: 82rpx;
			}
		}
	}

	.tab-background {
		// height: 70rpx;
		// background: url("../../../static/img/tab-background.png") no-repeat;
		background-position: 0 40rpx;
		background-size: 100% 20rpx;
		color: #e93323;
		position: relative;
	}

	.home-icon {
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
		color: #333;
	}

	.home-icon-small {
		width: 25%;
		text-align: center;

	}

	.home-icon-small img {
		width: 60rpx;
		height: 60rpx;
	}

	.home-icon-small dt {
		margin-top: 10rpx;
		color: #333;
		font-size: 26rpx;
	}

	.good-fenlei {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 99;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 30.5333333333vw;
		// height: 10.9333333333vw;
		height: 100%;
		background: #fff;
		justify-content: flex-end;
		// box-shadow: -0.5333333333vw 0.5333333333vw 1.0666666667vw #ccc;

		.fenlei-title {
			padding-right: 26upx;
			font-size: 2.9333333333vw;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000;
			line-height: 10.9333333333vw;
			margin-left: 1.0666666667vw;
		}
	}

	.left {
		padding: .5333333333vw;
		padding-left: 10rpx;
		padding-right:20rpx;
		color: #fff;
		font-size: 2.6666666667vw;
		// background-color: #00418a;
		// background-color: #E93323;
		background: linear-gradient(to left, #E93323, rgba(168, 132, 255, 0.8));
		border-radius: 0 0 2.1333333333vw 0;
	}

	.fixed-center {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
	}

	.item-img {
		// width: 100%;
		width: 95%;
		margin: 0 auto;
		margin-top: 2.5%;
		margin-bottom: 2.5%;
		// height: 355rpx;
		// padding: 1 1px;
	}

	.img_wrap {
		width: 400rpx;
		height: 325rpx;
		border-radius: 12px;
		display: table-cell; //主要是这个属性
		vertical-align: middle;
		text-align: center;
	}

	// .img_wrap img {
	// 	height:355rpx;
	// }

	.colon {
		display: inline-block;
		margin: 0 6px;
		font-weight: bold;
		font-size: 24px;
		color: #E93323;
	}

	.block {
		display: inline-block;
		width: 22px;
		color: #E93323;
		font-size: 24px;
		text-align: center;
		//background-color: #ee0a24;
	}

	.font-sm {
		font-size: 10px;
	}

	.cu-btn {
		font-size: 12px;
	}

	.broadcast-box {
		width: 100%;
		background-color: #fff;
		// border-radius: 8upx;
		overflow: hidden;
		// background: linear-gradient(to left, #f4b407, #f6e3af);
		// border-bottom: 4px solid #f4b50a;
		.broadcast-title {
			// padding-left: 10upx;
			// width: 360upx;
			height: 50upx;
			box-sizing: content-box;
			display: flex;
			align-items: center;
			// line-height: 50upx;
			// color: #e63930;
			// text-align: center;
			// font-weight: bold;
			// border-bottom: 0.5px solid #ded1fe;
			// background-color: #E93323;
			// background: linear-gradient(to bottom, #f54c3d, #ea2f23);
			// border-bottom: 0.5px solid #c11e0f;
			// background-color: #d48735;
			.line {
				padding-left: 10upx;
				color: #333;
			}
		}
	}

	.nav .cu-item{
		padding: 0;
	}

	/deep/ .van-dropdown-menu__bar{
		background: none;
		box-shadow: none;
		height: 24px;
	}
	/deep/ .van-dropdown-menu__title{
		font-size: 13px;
		color: #fff;
	}
	/deep/ .van-dropdown-menu__title::after{
		border-color: transparent transparent #fff #fff;
	}
	/deep/ uni-swiper .uni-swiper-dots-vertical{
		right: -30px;
	}
	/deep/ .van-count-down{
		color: #E93323;
		font-size: 40rpx;
	}
	/deep/ .van-dialog__message{
		font-size: 18px;
		color: red;
	}

	.over-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.over-block {
			position: relative;
			width: 486upx;
			height: 600upx;
			// background-color: #fff;
			// text-align: center;
			// border-radius: 26upx;
			// font-size: 32rpx;
			// line-height: 200upx;
			// color: red;
			overflow: hidden;
			background-image: url(../../../static/img/zj_bg.png);
			background-size: 100%;
		}
		.over-title{
			position: relative;
			height: 80upx;
			line-height: 80upx;
			// padding-bottom: 14upx;
			// background: #ff5420;
			// background: -webkit-linear-gradient(to right, #ff5420, #ff9639);
			// background: linear-gradient(to right, #ff5420, #ff9639);
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			margin-bottom: 20upx;
		}
		.over-pic{
			margin: 40upx auto 0;
			width: 160upx;
			height: 160upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #fff;
			overflow: hidden;
		}
		.over-desc{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.over-ion01, .over-ion02{
			position: absolute;
			top: 20upx;
			width: 40upx;
			height: 40upx;
		}
		.over-ion01{
			left: 30upx;
			width: 50upx;
			height: 50upx;
			transform:rotate(30deg);
			-ms-transform:rotate(30deg); 	
			-moz-transform:rotate(30deg); 	
			-webkit-transform:rotate(30deg); 
			-o-transform:rotate(30deg); 
		}
		.over-ion02{
			top: 6upx;
			right: 30upx;
			width: 60upx;
			height: 60upx;
			transform:rotate(30deg);
			-ms-transform:rotate(30deg); 	
			-moz-transform:rotate(30deg); 	
			-webkit-transform:rotate(30deg); 
			-o-transform:rotate(30deg); 
		}
		.over-main{
			text-align: center;
			.big{
				font-size: 36rpx;
			}
			.sm{
				font-size: 26rpx;
			}
			.sp{
				padding: 40upx 0;
				font-size: 30rpx;
				color: #fff;
			}
		}
		.over-btn{
			position: absolute;
			left: 50%;
			bottom: 40upx;
			margin-left: -130upx;
			width: 260upx;
			height: 60upx;
			line-height: 60upx;
			font-size: 30rpx;
			color: #fe4b11;
			background-image: linear-gradient(#fff542, #fdb86f);
			border-radius: 40upx;
		}
	}

  	

	.top-swiper{
		// box-shadow: -2px 15px 18px 1px rgba(0,0,0,0.28);
		// -webkit-box-shadow: -2px 15px 18px 1px rgba(0,0,0,0.28);
		// -moz-box-shadow: -2px 15px 18px 1px rgba(0,0,0,0.28);
	}

	.hot-box{
		font-size: 46rpx;
		color: red;
	}
	/deep/ .uni-scroll-view-content{
		background-color: #fff;
		// border-radius: 24upx;
	}
	.latest-draw{
		font-family: PingFangSC-Medium, "PingFang SC";
    	color: #fff;
    	background-color: #e93323;
		border-radius: 0 0 12upx 12upx;
		// margin-top: -2px;
	}
	.latest-draw-box{
		padding: 0;
		margin: 0;
		// border-bottom: 2px solid #e93323;
		border-top: 12upx solid #f5f5f5;
	}

	.page-wrapper-load {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.block {
			width: 160upx;
			height: 160upx;
			border-radius: 20upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	
</style>
